<template>
  <div>
    您的地址是:{{ place.address }}
    <a-button @click="toggleVisible">选择位置</a-button>
    <map-dialog
      v-model:visible="visible"
      :point="place.point"
      :range="place.range"
      @confirm="confirm"
    />
  </div>
</template>

<script>
import MapDialog from "./MapDialog";
import { reactive, toRefs } from "vue";
export default {
  name: "index",
  components: {
    MapDialog
  },
  setup() {
    const data = reactive({
      place: {},
      visible: false,
      toggleVisible() {
        data.visible = !data.visible;
      },
      confirm(place) {
        console.log(place);
        data.place = place;
      }
    });

    return {
      ...toRefs(data)
    };
  }
};
</script>

<style scoped lang="less"></style>
